<template>
  <div class="bz-color-picker">
    <div class="native-color-container">
      <input type="color" :value="value" @input="onChange" />
    </div>
    <ul class="picked-color-list">
      <li
        v-for="(item, key) in colors"
        :key="key"
        :class="`item-${key}`"
        @click.prevent="onChange(item)"
      >
        <div
          :style="{ backgroundColor: item }"
          class="color-item"
          v-if="item.startsWith('#')"
        ></div>
        <div v-else class="color-item transparent-back"></div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
const defaultColors = [
  '#ffffff',
  '#f5222d',
  '#fa541c',
  '#fadb14',
  '#52c41a',
  '#1890ff',
  '#722ed1',
  '#8c8c8c',
  '#000000',
  ''
]
</script>
<script setup lang="ts">
withDefaults(
  defineProps<{
    value: string
    colors?: any
  }>(),
  {
    value: '',
    colors: defaultColors
  }
)
const emit = defineEmits<{
  (e: 'change', color: string | Event): void
}>()
const onChange = (color: string | Event) => {
  if (typeof color === 'string') {
    emit('change', color)
  } else {
    const target = color.target as HTMLInputElement
    emit('change', target.value)
  }
}
</script>

<style lang="scss" scoped>
.bz-color-picker {
  display: flex;
  .native-color-container {
    width: 40%;
    input[type='color'] {
      width: 100%;
      cursor: pointer;
      height: 50px;
      border: 0;
      padding: 0;
      background-color: transparent;
    }
  }
  .picked-color-list {
    padding: 0 0 0 5px;
    margin: 0;
    width: 60%;
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      flex: 1;
      width: 20%;
      min-width: 20%;
      max-width: 20%;
      .color-item {
        padding: 3px;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        margin-right: 5px;
        cursor: pointer;
        border: 1px solid #ccc;
      }
      .transparent-back {
        background: url('@/assets/transparent.png') no-repeat;
      }
    }
  }
}
</style>
